
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="header">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            size="default"
            class="addbutton"
            icon="el-icon-edit"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </div>
        <el-form
          :model="form"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
          class="form"
          :rules="rules"
        >
          <el-form-item label="学科" class="elform">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              @change="subjectFn"
            >
              <el-option
                v-for="obj in questionsList"
                :key="obj.value"
                :label="obj.label"
                :value="obj.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" class="elform">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                v-for="obj in twoLevel"
                :key="obj.id"
                :label="obj.directoryName"
                :value="obj.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" class="elform">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="obj in tagslist"
                :key="obj.id"
                :label="obj.tagName"
                value="shanghai"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" class="elform">
            <el-input
              type="text"
              v-model="form.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题类型" class="elform">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in questionTypeMap"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" class="elform">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficultyMap"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" class="elform">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="item in directionMap"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人" class="elform">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option
                v-for="obj in userlist"
                :key="obj.id"
                :label="obj.username"
                :value="obj.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="题目备注"
            size="normal"
            style="width: 25%; display: inline-block"
          >
            <el-input type="text" v-model="form.remarks"></el-input>
          </el-form-item>
          <el-form-item
            label="企业简介"
            size="normal"
            style="width: 25%; display: inline-block"
          >
            <el-input type="text" v-model="form.shortName"></el-input>
          </el-form-item>
          <el-form-item label="城市" class="elform">
            <el-col :span="12">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                @change="provinceChangeFn"
              >
                <el-option
                  v-for="item in provinces"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="form.city" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in cityList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item size="large" class="elform">
            <el-button>清除</el-button>
            <el-button type="primary" @click="searchFn">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="radio-group">
          <el-radio-group v-model="form.chkState" @change="chkStateFn">
            <el-radio-button :label="null">全部</el-radio-button>
            <el-radio-button
              v-for="item in chkTypeMap"
              :label="item.value"
              :key="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="data-number">
          <i class="el-icon-iitem.snfo"></i>
          <span>数据一共{{ choiceListAll.counts }}条</span>
        </div>
        <el-table :data="choiceList" style="width: 100%" stripe>
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column label="题型" width="120">
            <template #default="{ row }">
              <span>{{ mapFn(row.questionType, 1) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="120">
            <template #default="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="120">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template #default="{ row }">
              <span>{{ difficultymapFn(row.difficulty) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template #default="{ row }">
              <span>{{ chkTypeFn(row.chkState) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column
            prop="choiceList.items.publishState"
            label="发布状态"
            width="120"
          >
            <template #default="{ row }" width="120">
              <span>{{ mapFn(row.publishState, 2) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="previewFn(row)">预览</el-button>
              <el-button type="text" size="small" :disabled="row.chkState !== 1" @click="auditFn(row.id)">审核</el-button>
              <el-button type="text" size="small"  @click="upFn(row.id,row.publishState)">{{row.publishState === 1 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" @click="$router.push(`/questions/new?id=${row.id}`)">修改</el-button>
              <el-button type="text" size="small" @click="delFn(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码条 -->
        <el-pagination background layout="->, prev, pager, next, sizes, jumper" :total="choiceListAll.counts"  :page-size.sync="form.pagesize" :current-page.sync="form.page" :page-sizes="[5, 10, 20, 50]"
          @current-change="currentChangeFn"
          @size-change="sizeChangeFn"
          > </el-pagination>
      </el-card>
    </div>
    <QuestionPreview ref="questionPreview" :questionTypeMap="questionTypeMap" :choiceListAll="choiceListAll"></QuestionPreview>
    <Audit ref="Audit"></Audit>
  </div>
</template>

<script>
import Audit from './questionc-omponents/audit.vue'
import QuestionPreview from './questionc-omponents/question-preview.vue'
import {
  simple as subjectsSimple
  // detail as detailAPI
} from '@/api/hmmm/subjects'
import { list as subjectsDetail } from '@/api/hmmm/directorys'
import { list as tagslist } from '@/api/hmmm/tags'
import { list as userlist } from '@/api/base/users'
import { provinces as provincesAPI, citys as citysAPI } from '@/api/hmmm/citys'
import {
  chkType,
  difficulty as difficultyMap,
  direction as directionMap,
  questionType as questionTypeMap,
  chkType as chkTypeMap,
  publishType
} from '@/api/hmmm/constants'
import { choice as choiceAPI, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  components: {
    QuestionPreview,
    Audit
  },
  data () {
    return {
      publishType: publishType, // 发布状态
      // 精选题库列表所有数据
      choiceListAll: {},
      // 精选题库列表,item内的数据
      choiceList: [],
      chkTypeMap: chkTypeMap, // 精品审核
      questionTypeMap: questionTypeMap, // 题型
      directionMap: directionMap, // 方向
      difficultyMap: difficultyMap, // 难度
      // 储存区域信息
      cityList: [],
      // 储存城市信息
      provinces: [],
      // 储存录入人信息
      userlist: [],
      // 储存二级目录
      twoLevel: [],
      tagslist: [], // 储存标签列表
      questionsList: [], // 储存试题列表(简单列表) id,subjectName:学科名，addDate：添加时间

      // 双向绑定
      form: {
        tags: null, // 标签名称
        questionType: null, // 试题类型
        difficulty: null, // 难度
        subjectID: null, // 学科value
        pagesize: 5, // 页尺寸
        page: 1, // 当前页数
        chkState: null, // 审核状态
        catalogID: null, // 目录
        creatorID: null, // 录入人 id
        direction: null, // 方向
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        keyword: null, // 关键字
        province: null, // 企业所在地省份
        city: null // 企业所在城市
      },
      // 表单验证规则
      rules: {}
    }
  },
  methods: {
    // 删除
    async delFn (row) {
      await remove(row)

      console.log('这里是删除', row)

      this.$message.success('删除成功')
      this.getchoiceFn()
    },
    // 上下架
    upFn (id, publishState) {
      if (publishState === 1) {
        this.$confirm('确认上架吗').then(async () => {
          await choicePublish({ id: id, publishState: publishState })
          console.log('上架成功')
          this.getchoiceFn()
        }).catch(() => {

        })
      } else {
        this.$confirm('确认下架吗').then(async () => {
          await choicePublish({ id: id, publishState: publishState })
          console.log('上架成功')
        }).catch(() => {

        })
      }
    },
    // 审核按钮
    auditFn (id) {
      console.log('审核按钮')
      this.$refs.Audit.showFn(id)
    },
    // 导航切换事件
    chkStateFn () {
      this.getchoiceFn()
    },
    // 搜索按钮
    searchFn () {
      this.getchoiceFn()
    },
    // 学科详情
    // async getdetailFn (subjectID) {
    //   const res = await detailAPI({ id: 32 })
    //   console.log('学科详情', res)
    //   return res
    // },
    // 映射题型/发布状态
    mapFn (row, index) {
      // eslint-disable-next-line eqeqeq
      if (index === 1) {
        // eslint-disable-next-line eqeqeq
        const arry = questionTypeMap.filter((item) => item.value == row)
        // return questionTypeMap.label
        return arry[0]?.label || ''
      } else if (index === 2) {
        if (row === 0) {
          const arry = publishType.filter((item) => item.value === 3)
          return arry[0]?.label || ''
        } else {
          const arry = publishType.filter((item) => item.value === 2)
          return arry[0]?.label || ''
        }
      }
    },
    // 映射难度
    difficultymapFn (row) {
      // eslint-disable-next-line eqeqeq
      const arry = difficultyMap.filter((item) => item.value == row)
      // return questionTypeMap.label
      return arry[0]?.label || ''
    },
    // 映射审核状态
    chkTypeFn (row) {
      // eslint-disable-next-line eqeqeq
      const arry = chkType.filter((item) => item.value == row)
      // return questionTypeMap.label
      return arry[0]?.label || ''
    },
    // 每页条数改变事件
    sizeChangeFn () {
      this.getchoiceFn()
      this.form.page = 1
    },
    // 当前页改变事件
    currentChangeFn () {
      this.getchoiceFn()
    },

    // 获取区域列表
    async getcityFn () {
      console.log(this.form.province)
      const res = citysAPI(this.form.province)
      this.cityList = res
      console.log('获取区域列表', res)
    },

    // 获取学科下拉简单列表
    async getQuestionsListFn () {
      // const { data } = await simple(this.form)
      //
      // console.log('学科列表', this.questionsList)
      const { data } = await subjectsSimple()
      // this.questionsList = data.items
      this.questionsList = data
      console.log(data)
    },
    // 学科下拉列表改变事件
    subjectFn () {
      console.log('这里是学科下拉', this.form.subjectID)
      console.log(this.form.subjectID)
      this.getSecondList()
      this.gettagslistFn(this.form)
    },
    // 获取二级目录下拉
    async getSecondList () {
      // console.log(this.form.subjectID)
      const { data } = await subjectsDetail(this.form)
      console.log('二级目录', data)
      this.twoLevel = data.items
      // this.gettagslistFn()
    },
    // 获取标签列表
    async gettagslistFn (res) {
      const { data } = await tagslist(res)
      console.log('标签列表', data)
      this.tagslist = data.items
      // const { data } = await tagslist({ subjectID: subjectID })
      // console.log('标签列表', data.items[0].subjectName)
    },
    // 获取录入人信息
    async userlistFn () {
      const { data } = await userlist({ page: 1, pagesize: 1000, keyword: '' })
      console.log('录入人信息', data.list)
      this.userlist = data.list
    },
    // 获取城市
    async getProvincesFn () {
      const res = await provincesAPI()
      this.provinces = res
      console.log('就是这啊', this.provinces)
    },
    // 下拉城市改变事件
    provinceChangeFn (res) {
      this.getcityFn()
    },
    // 获取精选题库列表
    async getchoiceFn () {
      const { data } = await choiceAPI(this.form)
      this.choiceListAll = data
      this.choiceList = data.items
      console.log('精选题库列表', this.choiceList)
    },
    // 获取科目名和科目所属目录
    // getsubjectName (subjectID) {
    // const { data } = await tagslist({ subjectID: subjectID })
    // const res = this.gettagslistFn({ subjectID: subjectID })

    // return res
    // }
    previewFn (row) {
      this.$refs.questionPreview.showDir(row)
    }
  },
  created () {
    this.getQuestionsListFn()
    this.userlistFn()
    this.getProvincesFn()
    this.getchoiceFn()
    // this.getdetailFn()
    // getsubjectName()
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-radio-group {
  border-bottom: 0 solid;
}
.elform {
  display: inline-block;
  width: 25%;
  height: 40px;
}
.header {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: red;
  border: 0 solid;
}
.addbutton {
  height: 25px;
  line-height: 15px;
  padding: 5px 12px;
  margin-bottom: 20px;
}
.form {
  display: flex;
  flex-wrap: wrap;
}
.radio-group {
  border-bottom: 1px solid #dcdfe6;
}
.data-number {
  margin: 12px 0;
  background-color: #dcdfe6;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  padding: 0 20px;
  span {
    font-size: 14px;
    padding-left: 10px;
  }
}
.A {
  color: blue;
  font-size: 14px;
}
</style>
